// components/Loading/Loading.tsx
import React from "react";

interface LoadingProps {
  message?: string;
}

export const Loading: React.FC<LoadingProps> = ({
  message = "Preparing your workspace..."
}) => {
  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#ffffff',
      gap: '24px'
    }}>
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: '12px'
      }}>
        <div style={{
          width: '32px',
          height: '32px',
          backgroundColor: '#1890ff',
          borderRadius: '8px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
          fontWeight: 'bold',
          fontSize: '18px'
        }}>
          R
        </div>
        <span style={{
          fontSize: '24px',
          fontWeight: 'bold',
          color: '#333'
        }}>
          Refine Admin
        </span>
      </div>

      <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        gap: '8px'
      }}>
        <div style={{
          width: '10px',
          height: '10px',
          backgroundColor: '#1890ff',
          borderRadius: '50%',
          animation: 'bounce 1.5s infinite'
        }}></div>
        <div style={{
          width: '10px',
          height: '10px',
          backgroundColor: '#1890ff',
          borderRadius: '50%',
          animation: 'bounce 1.5s infinite 0.2s'
        }}></div>
        <div style={{
          width: '10px',
          height: '10px',
          backgroundColor: '#1890ff',
          borderRadius: '50%',
          animation: 'bounce 1.5s infinite 0.4s'
        }}></div>
      </div>

      <p style={{
        fontSize: '16px',
        color: '#666',
        margin: 0
      }}>
        {message}
      </p>

      <style jsx>{`
        @keyframes bounce {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-10px); }
        }
      `}</style>
    </div>
  );
};
